import React,{Fragment, useState,useEffect} from 'react'
import { useHistory } from 'react-router-dom';
import {Pagination,Icon,} from 'antd-mobile'
import {Spin,Tag} from 'antd'
import {request} from '../../../../network/request'
import '../../video/video.css'

const SearchVideo = (props) => {
   
    let history = useHistory()

    const [isloading,setisloading] = useState(false) 
    const [videos,setvideos] = useState([])  
    const [totalpage,settotalpage] = useState(1)  
    const [keyword,setkeyword] = useState('')
    const [page,setpage] =useState(1)


    useEffect(()=>{
     
        setvideos(props.tab.data)
        settotalpage(props.tab.totalpage)
        setkeyword(props.keyword)
        
         
      },[])


    const on_page_change = (page) => {
        setisloading(true)
        request({
            url:`/search/${keyword}/${page}/15`
        }).then(res=>{
            setvideos(res.data.video.list) 
            setisloading(false)
            setpage(page)
        })
    }



    const onvideoclick = (value) =>{
        history.push({pathname:'/main/home/video/detail',state:{video_info:value}})
      }


    return (
        <Fragment>
            <Spin spinning={isloading}>
            <div className="search-video">
                {videos.map(item=>{
                    const keywordArray = item.keywords.trim().split(" ")
                    return (
                        <div 
                            key={item.id} 
                            style={{ textAlign:'center',  alignItems:'center' , padding: '0 15px',border:'1px dotted #F6F6F6' }} 
                            onClick={()=>onvideoclick(item)}>
                                
                            <img style={{height:'180px'}} src={item.cover}/>
                            <div className="videoitem_down">
                            <div className="videoitem_dleft">
                                <div className="videoname">
                                {item.videoname}
                                </div>
                                <div className="uploadtime">
                                {item.uploadTime}
                                </div>
                            </div>

                            <div className="videoitem_dright">
                                <Tag color="#2db7f5">{keywordArray[0]}</Tag>
                            
                                
                        </div>
          
          
        </div>

      </div>
                    )
                })}
            </div>

            <Pagination total={totalpage}
                        className="custom-pagination-with-icon"
                        current={page}
                        locale={{
                            prevText: (<span className="arrow-align"><Icon type="left" />上一页</span>),
                            nextText: (<span className="arrow-align">下一页<Icon type="right" /></span>),
                        }}
                        style={{
                            position:'relative',
                            
                            width:'100%'
                                       
                        }}
                        onChange={on_page_change}
                        
                        />

            </Spin>
        </Fragment>
        
    )
}

export default SearchVideo